<template>
  <div>
    <!-- 头部导航 -->
    <header-tab></header-tab>
    <br />
    <!-- 导航图 -->
    <img class="head-img" src="https://images.mafengwo.net/images/qa/h5_banner.jpg" alt />
    <br />
    <!-- 面板区域 -->
    <router-link to v-for="(dr, index) in drs" :key="index">
      <div class="zhuti">
        <h2>{{ dr.title }}</h2>
        <br />
        <div>
          <div class="mb">
            <img class="mb-tx" v-lazy="dr.Headportrait" alt />
            <span>{{ dr.Theauthor }}</span>
            <br />
            <div class="wenzang">
              <img class="mb-wzt" v-lazy="dr.img" alt />

              <div class="mb-wz">
                <p>{{ dr.Thearticle }}</p>
              </div>
            </div>
            <div class="db">
              <span>{{ dr.location }}</span>
              <span class="liulan">{{ dr.views }}浏览·{{ dr.answer }}回答·{{ dr.praise }}页</span>
            </div>
          </div>
        </div>
      </div>
    </router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      drs: [],
    };
  },
  mounted() {
    this.$axios.get("/wenda").then((res) => {
      this.drs = res.data.result;
    });
  },
};
</script>

<style scoped>
.head-img {
  width: 100%;
  /* height: 150px; */
}
.mint-search {
  width: 100%;
}
.zhuti {
  width: 375px;
  height: 230px;
  background-color: #ffffff;
  margin: 0px 0px 10px;
  padding: 14px 15px 18px;
}
.mb {
  width: 345px;
  height: 165px;
}
.wenzang {
  width: 345px;
  height: 120px;
}
.mb-tx {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.mb-wzt {
  width: 140px;
  height: 105px;
  /* display:inline-block; */
  float: left;
}
.mb-wz p {
  font-size: 16px;
  color: #666;
  line-height: 26px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  padding-left: 10px;
}
.db {
  width: 345px;
  height: 15;
  font-size: 15px;
  color: #999999;
}
.liulan {
  float: right;
  width: 213px;
  height: 15;
  font-size: 15px;
  color: #999999;
}
</style>
